<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
        <script src="../plugins/bower_components/jquery/dist/jquery.min.js"></script>
        
        <script>
        
        $(function () {
        	
        	$.post('../summary/countAge.action',function(data){
        		var chart = Highcharts.chart('container',{
    	        	credits:{
    	            	enabled:false
    	            },
    	            chart: {
    	                type: 'column'
    	            },
    	            title: {
    	                text: '评估结果 - 年龄比重',
    	                style: { "color": "green", "font-family":"隶书", "fontSize":"40px"}
    	            },
    	            xAxis: {
    	                categories: ['60以下','60-69','70-79','80-89','90以上'],
    	                crosshair: true,
    	                title: {
    	                    text: ''
    	                },
    	               // tickColor:'red',
    	                gridLineColor: '#CCC',
    	                gridLineWidth: 1
    	            },
    	            colors:['green'],
    	            yAxis: {
    	                min: 0,
    	                title: {
    	                    text: '数量',
    	                    style:{ "color": "black","fontSize": "15px" }
    	                },
    	               	labels:{
    	               		style:{ "color": "black", "cursor": "default", "fontSize": "15px","font-weight":"bold" }
    	               	}
    	            },
    	            tooltip: {
    	                // head + 每个 point + footer 拼接成完整的 table
    	                headerFormat: '<span style="font-size:10px">年龄范围: <b>{point.key}</b></span><table>',
    	                pointFormat: '<tr><td style="padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
    	                footerFormat: '</table>',
    	                shared: true,
    	                useHTML: true
    	            },
    	            plotOptions: {
    	                column: {
    	                    borderWidth: 0
    	                }
    	            },
    	            series: [{
    	            	name:'人数',
    	            	data:[data.age_60?data.age_60:0, 
    	            		  data.age_60_70?data.age_60_70:0, 
		            		  data.age_70_80?data.age_70_80:0, 
		            		  data.age_80_90?data.age_80_90:0,
		            		  data.age_90?data.age_90:0]
	   	            }]
    	        });
        	})
        	
        })
        </script>
    </head>
    
    
    <body style="background-color: white;">
        <div id="container" style="height:480px;"></div>
        
    </body>
</html>